<template>
  <div class="friendSetting-page">
    <van-popup
      class="contact-details-setting"
      v-model:show="showSetting"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="top">
        <TopNav :title="'资料设置'" />
      </div>
      <div class="content">
        <van-cell title="设置备注和标签" is-link />
        <van-cell title="朋友权限" is-link />
        <van-cell title="把他推荐给朋友" is-link class="listTop" />
        <van-cell title="添加到桌面" is-link />
        <van-cell title="设为星标朋友" is-link class="listTop">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-switch v-model="checkedX" />
          </template>
        </van-cell>
        <van-cell title="加入黑名单" is-link class="listTop">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-switch v-model="checkedH" />
          </template>
        </van-cell>
        <van-cell title="投诉" is-link />
        <van-button class="sc">删除</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import TopNav from "@/components/TopNav.vue";
const router = useRouter();
const route = useRoute();
const showSetting = ref(false);
const contactDetails = ref(null);
const checkedX = ref(true);
const checkedH = ref(false);

watch(
  () => route.query,
  (newVal) => {
    if (newVal.showSetting) {
      showSetting.value = true;
      contactDetails.value = JSON.parse(newVal.contactDetails);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.friendSetting-page {
  width: 100%;
  height: 100%;
  .contact-details-setting {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .top {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 18px;
      }
    }
    .content {
      flex: 1;
      width: 100%;
      background-color: #ccc;
      .sc {
        width: 100%;
        margin-top: 5px;
        color: red;
      }
    }
  }
  .listTop {
    margin-top: 5px;
  }
}
</style>
